<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1474698_wj41ej96rqm.css">
    <script src="./js/rem.js"></script>
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .monts{
            width: 100vw;
            height: 90vh;
        }
        .monts .title{
            width: 100%;
            padding-left: .3rem;
            font-size: .4rem;
            font-weight: bold;
        }
        .monts .chose-month{
            width: 100%;
            height: auto;
            margin: .68rem 0 .59rem;
            display: flex;
            align-items:center;
            justify-content:center;
        }
        .monts .chose-month span{
            font-size: .32rem;
            color: #000;
            margin: 0 .95rem;
        }
        .monts .weekend{
            width: 100%;
            display: flex;
            align-items:center;
            justify-content:space-around;
            font-size: .36rem;
            color: #8A9BC5;
        }
        
        .monts .weekend .rd{
            color: #FF4E22;
        }
        .monts .btns{
            width: 6.94rem;
            height: .8rem;
            color: #fff;
            background:rgba(76,137,254,1);
            border-radius:40px;
            margin: 1.1rem auto 0;
        }
        .monts .fn-ctr{
            display: flex;
            align-items:center;
            justify-content:center;
        }
        .monts .date{
            width: 100%;
            height: auto;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        .monts .date div{
            width: .8rem;
            height: .8rem;
            border-radius: 50%;
            font-size: .28rem;
            color: #8A9BC5;
            margin: .2rem .08rem;
            transition: .3s;
        }
        .monts .date div.active{
            color: #fff;
            background-color: #4C89FE;
        }
        .monts .date div.nouse{
            color: #BBBBBB;
            background-color: #E5E5E5;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="monts">
            <div class="title">选择出行日期</div>
            <div class="chose-month">
                <i class="iconfont iconjiantouzuo" @click="changeMonth('prev')"></i>
                <span>{{year}}年{{month}}月</span>
                <i class="iconfont iconarrow-right" @click="changeMonth('next')"></i>
            </div>
            <div class="weekend">
                <span class="rd">日</span>
                <span>一</span>
                <span>二</span>
                <span>三</span>
                <span>四</span>
                <span>五</span>
                <span class="rd">六</span>
            </div>
            <div class="date">
                <div class="fn-ctr" :class="{active:item.active == 2,nouse:item.active == 0}" v-for="(item,index) in dayList" :key="index" @click="handerClick(item.day,item.active)"><span>{{item.day}}</span></div>
            </div>
            <div class="btns fn-ctr"><span>确定</span></div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function(){
            Vue.component('date-rl',{
                template:'<div class="monts"><div class="title">选择出行日期</div>'
                            +'<div class="chose-month"><i class="iconfont iconjiantouzuo" @click="changeMonth("prev")"></i>'
                            +'<span>{{year}}年{{month}}月</span><i class="iconfont iconarrow-right" @click="changeMonth("next")"></i> </div><div class="weekend">'
                            +'<span class="rd">日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span class="rd">六</span>'
                            +'</div> <div class="date">'
                            +'<div class="fn-ctr" :class="{active:item.active == 2,nouse:item.active == 0}" v-for="(item,index) in dayList" :key="index" @click="handerClick(item.day,item.active)"><span>{{item.day}}</span></div>'
                            +'</div><div class="btns fn-ctr"><span>确定</span></div></div>',
                data:function(){
                    return {
                        year:2019,
                        month:10,
                        dayList:[],
                        nouseDay:"2019-10-11",
                        startDay:"2019-10-11",
                        endDay:"",
                        maxNum:0, //最大选择数 0为不限制
                    }
                },
                props:{
                    propDay:{default:"2019-1-1",type:String},
                },
                methods:{
                    //月份改变事件
                    changeMonth:function(type){
                        var cday = this.getMonthlast(this.year+"-"+this.month,type);
                        this.year = cday.y;
                        this.month = cday.m;
                        this.renderMoment();
                    },
                    //点击事件
                    handerClick:function(day,status){
                        if(status == 1 || status == 2){
                            var ckDay = this.year + "-" + this.month + "-" + day;
                            if(this.compareDate(ckDay,this.startDay)){
                                this.endDay = ckDay;
                                this.renderMoment();
                            }else{
                                this.endDay = this.startDay;
                                this.startDay = ckDay;
                                this.renderMoment();
                            }
                        }
                        
                    },
                     //生成一个月日期
                    renderMoment:function(year,month){
                        var year = this.year;
                        var month = this.month;
                        var monArr = []; //存放日期的数组
                        var smonArr = [];
                        var emonArr = [];
                        var day = this.getDaysInOneMonth(year,month);
                        var weekstart = this.getDayInWeekend(year,month,1);
                        var weekend = this.getDayInWeekend(year,month,day);
                        for(var i = 1;i<=day;i++){ //生成日期
                            var isActive = this.compareDate(this.year +"-"+this.month + "-" +i,this.nouseDay);
                            isActive ?  (isActive = this.isActiveDate(this.year +"-"+this.month + "-" +i) ? 2 : 1) : isActive = 0;
                            var obj = {
                                day:i,
                                active:isActive, //0是禁止选 1是正常状态  2是已选
                            };
                            monArr.push(obj);
                        };
                        for(var j = 1;j<= weekstart; j++){ //日期前边的空值
                            var ws = {
                                day:"",
                                active:1,
                            };
                            smonArr.push(ws);
                        }
                        for(var k = 1;k<= (6-weekend); k++){ //日期前边的空值
                            var we = {
                                day:"",
                                active:1,
                            };
                            emonArr.push(we);
                        }
                        this.dayList = smonArr.concat(monArr).concat(emonArr);
                    },
                    getDaysInOneMonth:function(year, month){ 
                        month = parseInt(month, 10); 
                        var d= new Date(year, month, 0); 
                        return d.getDate(); 
                    },
                    getDayInWeekend:function(year,month,day){
                        month = parseInt(month -1 , 10); 
                        day = parseInt(day, 10); 
                        var d= new Date(year, month, day); 
                        return d.getDay();
                    },
                    //获取某天之后的几天
                    getDateStr(day,AddDayCount) {
                        var dd = new Date(day || '2019-05-01'); //这里用户输入日期则把日期传入，若没有则括号内什么都不写
                        dd.setDate(dd.getDate()+AddDayCount);
                        //获取AddDayCount天后的日期，比如为5，则输入：Mon May 06 2019 08:00:00 GMT+0800 (中国标准时间)
                        var y = dd.getFullYear();
                        var m = dd.getMonth()+1;//获取当前月份的日期
                        var d = dd.getDate();
                        return y+"-"+m+"-"+d;
                    },
                    //获取某个月之后的月或之前的月
                    getMonthlast:function(ym,type){
                        ym = ym.split("-");
                        var prevM,year;
                        if(type == 'prev'){ //上个月
                            prevM = (~~ym[1]) - 1;
                            year = ~~ym[0];
                            if(prevM == 0){
                                prevM = 12;
                                year--;
                            }
                            
                        }else{
                            prevM = ~~ym[1] + 1;
                            year = ~~ym[0];
                            if(prevM == 13){
                                prevM = 1;
                                year++;
                            }
                        }
                        return {y:year,m:prevM}
                    },
                    //满足激活条件
                    isActiveDate:function(day){
                       return this.compareDate(day,this.startDay) && this.compareDate(this.endDay,day)
                    },
                    //比较日期的大小
                    compareDate:function(d1,d2){
                        return ((new Date(d1.replace(/-/g,"\/"))) >= (new Date(d2.replace(/-/g,"\/"))));
                    },
                },
                mounted:function(){
                    //初始化日期
                    this.startDay = this.propDay;
                    this.endDay = this.getDateStr(this.propDay,1);
                    this.nouseDay = this.propDay;
                    this.renderMoment();
                }
            })
            var root = new Vue({
                el:"#root",
                data:{
                    year:2019,
                    month:10,
                    dayList:[],
                    nouseDay:"2019-10-11",
                    startDay:"2019-10-11",
                    endDay:"",
                    maxNum:0, //最大选择数 0为不限制
                },
                methods:{
                    //月份改变事件
                    changeMonth:function(type){
                        var cday = this.getMonthlast(this.year+"-"+this.month,type);
                        this.year = cday.y;
                        this.month = cday.m;
                        this.renderMoment();
                    },
                    //点击事件
                    handerClick:function(day,status){
                        if(status == 1 || status == 2){
                            var ckDay = this.year + "-" + this.month + "-" + day;
                            if(this.compareDate(ckDay,this.startDay)){
                                this.endDay = ckDay;
                                this.renderMoment();
                            }else{
                                this.endDay = this.startDay;
                                this.startDay = ckDay;
                                this.renderMoment();
                            }
                        }
                        
                    },
                     //生成一个月日期
                    renderMoment:function(year,month){
                        var year = this.year;
                        var month = this.month;
                        var monArr = []; //存放日期的数组
                        var smonArr = [];
                        var emonArr = [];
                        var day = this.getDaysInOneMonth(year,month);
                        var weekstart = this.getDayInWeekend(year,month,1);
                        var weekend = this.getDayInWeekend(year,month,day);
                        for(var i = 1;i<=day;i++){ //生成日期
                            var isActive = this.compareDate(this.year +"-"+this.month + "-" +i,this.nouseDay);
                            isActive ?  (isActive = this.isActiveDate(this.year +"-"+this.month + "-" +i) ? 2 : 1) : isActive = 0;
                            var obj = {
                                day:i,
                                active:isActive, //0是禁止选 1是正常状态  2是已选
                            };
                            monArr.push(obj);
                        };
                        for(var j = 1;j<= weekstart; j++){ //日期前边的空值
                            var ws = {
                                day:"",
                                active:1,
                            };
                            smonArr.push(ws);
                        }
                        for(var k = 1;k<= (6-weekend); k++){ //日期前边的空值
                            var we = {
                                day:"",
                                active:1,
                            };
                            emonArr.push(we);
                        }
                        this.dayList = smonArr.concat(monArr).concat(emonArr);
                    },
                    getDaysInOneMonth:function(year, month){ 
                        month = parseInt(month, 10); 
                        var d= new Date(year, month, 0); 
                        return d.getDate(); 
                    },
                    getDayInWeekend:function(year,month,day){
                        month = parseInt(month -1 , 10); 
                        day = parseInt(day, 10); 
                        var d= new Date(year, month, day); 
                        return d.getDay();
                    },
                    //获取某天之后的几天
                    getDateStr(day,AddDayCount) {
                        var dd = new Date(day || '2019-05-01'); //这里用户输入日期则把日期传入，若没有则括号内什么都不写
                        dd.setDate(dd.getDate()+AddDayCount);
                        //获取AddDayCount天后的日期，比如为5，则输入：Mon May 06 2019 08:00:00 GMT+0800 (中国标准时间)
                        var y = dd.getFullYear();
                        var m = dd.getMonth()+1;//获取当前月份的日期
                        var d = dd.getDate();
                        return y+"-"+m+"-"+d;
                    },
                    //获取某个月之后的月或之前的月
                    getMonthlast:function(ym,type){
                        ym = ym.split("-");
                        var prevM,year;
                        if(type == 'prev'){ //上个月
                            prevM = (~~ym[1]) - 1;
                            year = ~~ym[0];
                            if(prevM == 0){
                                prevM = 12;
                                year--;
                            }
                            
                        }else{
                            prevM = ~~ym[1] + 1;
                            year = ~~ym[0];
                            if(prevM == 13){
                                prevM = 1;
                                year++;
                            }
                        }
                        return {y:year,m:prevM}
                    },
                    //满足激活条件
                    isActiveDate:function(day){
                       return this.compareDate(day,this.startDay) && this.compareDate(this.endDay,day)
                    },
                    //比较日期的大小
                    compareDate:function(d1,d2){
                        return ((new Date(d1.replace(/-/g,"\/"))) >= (new Date(d2.replace(/-/g,"\/"))));
                    },
                },
                mounted:function(){
                    this.endDay = this.getDateStr(this.startDay,1)
                    this.renderMoment();
                    
                }
            })
        }
        var riliMoment = {
            year:"",
            month:"",
        }
    </script>
</body>
</html>